<!--
 * @Author: zxm 308370383@qq.com
 * @Date: 2022-05-10 16:47:55
 * @LastEditors: zxm 308370383@qq.com
 * @LastEditTime: 2022-05-30 16:53:16
 * @FilePath: \网易云vuec:\Users\张湘铭\Desktop\information-building-146\0420\jsonp.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ul {
            list-style: none;
        }

        .li {
            padding: 10px;
            border-bottom: 1px solid #666;
            cursor: pointer;
        }

    </style>
</head>

<body>
    <p>jsonP解决跨域问题的理论依据：img、script、link、iframe这些标签可以加载外部网站的资源</p>
    <p>思路：动态的添加script标签，修改src属性，获取数据，里面就有我们需要的内容</p>
    <input type="text" class="input">
    <button class="btn" onclick="search()">百度搜索</button>
    <ul class="ul"></ul>
    <script>
        // 直接写会报错，因为跨域了：
        // Access to XMLHttpRequest at 'xxxx' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
        // window.onload = function() {
        //     var oAjax = new XMLHttpRequest();
        //     oAjax.open('get', 'http://suggestion.baidu.com/su?cb=callback&wd=crossfire')
        //     oAjax.send();
        //     oAjax.onreadystatechange = function() {
        //         if (oAjax.readyState == 4) {
        //             if (oAjax.status == 200) {
        //                 var res = JSON.parse(oAjax.responseText);
        //                 console.log(res);
        //             }
        //         }
        //     }
        // }

        function search() {
            var key = document.querySelector('.input').value;
            console.log(key);
            // jsonP 动态增加script标签
            var script = document.createElement('script');
<<<<<<< HEAD
            // 分配地址
            script.src = 'http://suggestion.baidu.com/su?cb=aaa&wd=' + key;
=======
            // 分配地址---cb callback 回调函数
            script.src = 'http://suggestion.baidu.com/su?cb=aaa&wd='+key;
>>>>>>> 0e7af6dc4adde8a4bc58fa537577624ce40329ad
            // 添加到文档中
            document.body.appendChild(script)
        }
        // 回调函数，回再后端返回数据后自动执行
        function aaa(val) {
            var list = val.s; // list是返回的搜索结果列表
            var str = '';
            var oUl = document.querySelector('.ul')
            // 根据数组生成li，显示在页面上
            for (var i = 0; i < list.length; i++) {
                str += `
                    <li class="li" id="${list[i]}" onclick="change()">${list[i]}</li>
                `
            }
            oUl.innerHTML = str;
        }
        // 点击调整页面
        function change() {
            var e = event;
            // 打开新窗口 window.open
            window.open('http://www.baidu.com/s?wd=' + e.target.id)
        }
    </script>
</body>

</html>
